<template>
<div>
    <ul class="list" ref="ul">
        <!-- 循环，将右侧的字母表在屏幕上显示出来 -->
        <li class="item" v-for="(item,index) in cities" :key="index" @click="handleAlphabetClick" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" ref="AlphabetList">
            {{item.title}}
        </li>
    </ul>
</div>
</template>

<script>
export default {
    name: 'CityAlphabet',
    props: {
        cities: Array,

    },
    computed: {
    },
    data() {
        return {
            touchStatus: false,
            startY: 0,
            timer: null,
        }
    },
    updated() {
        this.startY = (this.$refs.ul).offsetTop;
    },
    methods: {
        handleAlphabetClick(e) {
            this.$emit("Change", e.target.innerText)
        },
        handleTouchStart() {
            this.touchStatus = true;
        },
        handleTouchMove(e) {

            if (this.touchStatus = true) {
                if (this.timer) {
                    clearTimeout(this.timer)
                }
                this.timer = setTimeout(() => {
                    // 触点距离顶部的高度
                    const touchY = e.touches[0].clientY;
                    const index = Math.floor((touchY - this.startY) / 20);
                    if (index >= 0 && index < this.cities.length) {
                        this.$emit('touchChange', index);

                    }
                }, 5)

            }
        },
        handleTouchEnd() {
            this.touchStatus = false;
        },
    },
}
</script>

<style scoped>
.list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 10rem;
    right: 0;
    width: 1rem;

}

.item {
    z-index: 10;
    line-height: 1.3rem;
    text-align: center;
    color: #00bcd4;
    font-weight: 700;
}
</style>
